@use "../../../assets/scss/functions" as *;
@use "../../../assets/scss/vars" as *;
@use "../../../assets/scss/mixins" as *;
@use "../../../assets/scss/comm.scss";

.c-tab-panel {
    width: 70%;
    height: px2vmin(50);
    border: 1px solid #333;
    border-radius: px2vmin(8) px2vmin(8) 0 0;

    .c-tab-item {
        width: 33.3333%;
        height: 100%;
        border-left: 1px solid #333;

        &:first-child {
            border-left: none;

            &.active {
                border-radius: px2vmin(8) 0 0 0;
            }
        }

        &:last-child {
            &.active {
                border-radius: 0 px2vmin(8) 0 0;
            }
        }
    }

    .active {
        background-color: rgb(208, 130, 130);
        color: #fff;
    }
}

.c-tab-panel2 {
    width: 70%;
    height: px2vmin(50);
    border: 1px solid #333;
    border-radius: px2vmin(25);

    .c-tab-item {
        width: 33.3333%;
        height: 100%;
        border-radius: px2vmin(25);
    }

    .active {
        background-color: rgb(208, 130, 130);
        color: #fff;
    }
}

.c-tab-panel3 {
    width: 70%;
    height: px2vmin(50);
    border-radius: px2vmin(8) px2vmin(8) 0 0;

    .c-tab-item {
        width: 33.3333%;
        height: 100%;
        background-color: #fff;
        border: 1px solid #333;
        border-radius: px2vmin(8) px2vmin(8) 0 0;
    }

    .active {
        background-color: rgb(208, 130, 130);
        color: #fff;
    }

}

.border-test {
    --borderWidth: #{px2vmin(30)};
    width: 0;
    height: 0;
    border-top: var(--borderWidth) solid yellowgreen;
    border-bottom: var(--borderWidth) solid deeppink;
    border-left: var(--borderWidth) solid bisque;
    border-right: var(--borderWidth) solid chocolate;
}

.border-test2 {
    --borderWidth: #{px2vmin(30)};
    width: 0;
    height: 0;
    border-top: var(--borderWidth) solid transparent;
    border-bottom: var(--borderWidth) solid transparent;
    border-left: var(--borderWidth) solid bisque;
    border-right: var(--borderWidth) solid transparent;
}

.border-test3 {
    --borderWidth: #{px2vmin(30)};
    width: 0;
    height: 0;
    border-top: var(--borderWidth) solid transparent;
    border-bottom: var(--borderWidth) solid transparent;
    border-left: var(--borderWidth) solid bisque;
    transform: rotate(45deg);
}

.c-tab-panel4 {
    width: 70%;
    height: px2vmin(50);
    border-radius: px2vmin(8) px2vmin(8) 0 0;

    .c-tab-item {
        width: 33.3333%;
        height: 100%;
        background-color: #fff;
        border: 1px solid #333;
        border-radius: px2vmin(8) px2vmin(8) 0 0;
        position: relative;

        &::before {
            --borderWidth: #{px2vmin(8)};
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            width: 0;
            height: 0;
            z-index: 2;
            transform: translate(-50%, 45%) rotate(45deg);
            border-top: var(--borderWidth) solid transparent;
            border-bottom: var(--borderWidth) solid transparent;
            border-left: var(--borderWidth) solid transparent;
            border-right: none;
        }

        &::after {
            --borderWidth: #{px2vmin(8)};
            position: absolute;
            content: '';
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;
            transform: translateX(50%);
            z-index: 2;
            transform: translate(50%, 45%) rotate(-45deg);
            border-top: var(--borderWidth) solid transparent;
            border-bottom: var(--borderWidth) solid transparent;
            border-left: none;
            border-right: var(--borderWidth) solid transparent;
        }
    }

    .active {
        background-color: rgb(208, 130, 130);
        color: #fff;

        &::before {
            border-left-color: rgb(208, 130, 130);
        }

        &::after {
            border-right-color: rgb(208, 130, 130);
        }
    }

}

.c-tab-panel5 {
    width: 70%;
    height: px2vmin(50);
    border-radius: px2vmin(8) px2vmin(8) 0 0;
    background-color: #fff;
    border: 1px solid #333;

    .c-tab-item {
        width: 33.3333%;
        height: 100%;
        border-radius: px2vmin(8) px2vmin(8) 0 0;
        background-color: #fff;
    }

    .active {
        background-color: rgb(208, 130, 130);
        color: #fff;
    }

}